<template>
<<<<<<< HEAD
    <div class="gobstatute">
        <public-header></public-header>
        <div>
            <van-tabs color='#07c160' type="card" v-model="activeName" @click="onClick" sticky animated swipeable>
                <van-tab name='1' title='搜索'>
                    <van-search style="margin-top:8px"  @search="search"  v-model="fsearch" background="#07c160" placeholder="请输入搜索关键词" />
                    <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                    >
                        <van-cell is-link @click="toDetail(item)" v-for="item in list" :key="item.fid" :title="item.fid" >
                            <template slot="title">
                                <div v-html="item.fhtmlcontent" class='celltitle'></div>
                            </template>
                        </van-cell>
                    </van-list>
                </van-tab>
                <van-tab name='2' title='类别'>
                    <van-list
                        style="margin-bottom:40px"
                        v-model="loadingType"
                        :finished="finishedType"
                        finished-text="没有更多了"
                        @load="onLoadType"
                    >
                        <van-cell is-link @click="toDetail4Class(item.fid)"   v-for="item in list1" :key="item.fid" :title="item.fid" >
                            <template slot="title">
                                <div v-html="item.fhtmlcontent" class='celltitle'></div>
                            </template>
                        </van-cell>
                    </van-list>
                </van-tab>
                <van-tab name='3' title='收藏'>
                    <van-list
                        v-model="loadingC"
                        :finished="finishedC"
                        finished-text="没有更多了"
                        @load="onLoadC"
                    >
                        <van-cell is-link @click="toDetail4Class(item.fid)" v-for="item in listC" :key="item.fid" :title="item.fid" >
                            <template slot="title">
                                <div v-html="item.fhtmlcontent" class='celltitle'></div>
                            </template>
                        </van-cell>
                    </van-list>
                </van-tab>
            </van-tabs>
                <van-popup 
                    v-model="showList" 
                    get-container="body" 
                    position='bottom'
                >
              <van-picker
                show-toolbar
                value-key='text'
                :columns="columns"
                @cancel="onCancel"
                @confirm="onConfirm"
                />
                </van-popup>
            <van-popup 
                v-model="showTypeTree" 
                get-container="body"
                :style="{ height: '100%' }" 
                position='left'
            >
            <el-tree :expand-on-click-node='false' :data="typeList"  @node-click="handleNodeClick"></el-tree>
            </van-popup>
             <div v-if="activeId4tab =='2'" @click="ShowTree" class="statuteFooter">选择类别</div>
        </div>
    </div>
</template>

<script>
import  publicHeader  from '@/components/publicHeader';
import {
    getdatabysearch
    ,getdatabyadmin
    ,getdatabyKdcatalog
    ,getcolletion
} from '@/api/gov/statute';
import { 
    Button
    ,Tab
    , Tabs 
    ,Search
    ,List
    ,Cell
    ,CellGroup
    , Popup
    ,Picker
    ,TreeSelect
    ,Toast
} from 'vant';
export default {
    name: 'gobstatute',
    components: {
        publicHeader,
        [Toast.name]:Toast,
        [TreeSelect.name]:TreeSelect,
        [Button.name]:Button,
        [Picker.name]:Picker,
        [Popup.name]:Popup,
        [Tab.name]:Tab,
        [Tabs.name]:Tabs,
        [Search.name]:Search,
        [List.name]:List,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
    },
    data () {
        return {
            activeId4tab:'',
            totalCountc:0,
            pagenumc:1,
            isLoadingC:false,
            loadingC:false,
            finishedC:false,
            listC:[],
            totalCountType:0,
            finishedType:false,
            loadingType:false,
            activeId: 1,
            activeIndex: 0,
            typeList: [],
            showList:false,
            list: [],
            list1:[],
            loading: false,
            finished: false,
            refreshing: false,
            activeName:'1',
            fsearch:'',
            newsList: [],
            newsId: '',
            more: false,
            pagenum: 1,
            showLink: false,
            columns:[
                { text: '显示方法', link: '/govStatutehtmlConent' },
                { text: '显示内容', link: '/govStatutehtmlremark' }
            ],
            totalCount:0,
            obj :{},
            showTypeTree:false,
            pagenumtype:1
        }
    },
    created(){
     
    },
    methods:{
        handleNodeClick(val){
            console.log(val)
            this.fkdid = val.id
            this.pagenumtype = 1
            this.typeList = []
            this.getTypeList()
            this.showTypeTree = false
        },
        getTypeList(){
             getdatabyKdcatalog({
                fkdid: this.fkdid,
                userid: '472a1e84dfcf4dce945bdcd3fe37304a',
                pagenum: this.pagenumtype
            }).then(res=>{
                this.totalCountType = res.pageResult.totalCount
                this.list1 = res.pageResult.results
            })
        },
        init () {
            this.pagenum = 1
        },
        ShowTree(){
            getdatabyadmin().then(res => {
                console.log(res)
                if(res.isSuccess){
                    this.typeList = res.list
                    if(this.typeList.length !=0){
                        this.showTypeTree = true
                    }else{
                        Toast.fail('暂无类别')
                    }
                }
            })
        },
        onLoadC(){
            if (this.isLoadingC) {
                this.list = [];
                this.isLoadingC = false;
            }
            getcolletion({
                fsearch: '',
                userid: '472a1e84dfcf4dce945bdcd3fe37304a',
                pagenum: this.pagenumc
            }).then(res=>{
                if(res.isSuccess){
                    this.totalCountc = res.pageResult.totalCount
                    res.pageResult.results.forEach(element => {
                        this.listC.push(element);
                    });
                    this.pagenumc = res.pageResult.pageNo
                    this.loadingC = false;
                    if (this.listC.length >= res.pageResult.totalCount) {
                        this.finishedC = true;
                    }
                }else{
                    Toast.fail(res.errMessage)
                }
            })
        },
        onLoad() {
            if (this.isLoading) {
                this.list = [];
                this.isLoading = false;
            }
            getdatabysearch({
                fsearch: this.fsearch,
                userid: '472a1e84dfcf4dce945bdcd3fe37304a',
                pagenum: this.pagenum
            }).then(res=>{
                console.log(res)
                if(res.isSuccess){
                    this.totalCount = res.pageResult.totalCount
                    res.pageResult.results.forEach(element => {
                        this.list.push(element);
                    });
                
                    this.pagenum = res.pageResult.pageNo
                    this.loading = false;
                    if (this.list.length >= res.pageResult.totalCount) {
                        this.finished = true;
                    }
                }else{
                    Toast.fail(res.errMessage)
                }
            })
        },
        onLoadType() {
            if (this.isLoadingType) {
                this.list1 = [];
                this.isLoadingType = false;
            }
            getdatabyKdcatalog({
                fkdid: this.fkdid,
                userid: '472a1e84dfcf4dce945bdcd3fe37304a',
                pagenum: this.pagenumtype
            }).then(res=>{
                console.log(res)
                this.totalCountType = res.pageResult.totalCount
                res.pageResult.results.forEach(element => {
                    this.list1.push(element);
                });
             
                this.pagenumtype = res.pageResult.pageNo
                this.loadingType = false;
                if (this.list1.length >= res.pageResult.totalCount) {
                    this.finishedType = true;
                }
            })
        },
        onClick(name, title) {
            this.activeId4tab = name
            if(name == '1'){
                this.onLoad()
            }else if(name == '2'){
                getdatabyadmin().then(res => {
                    if(res.list.length !=0){
                        this.typeList = res.list
                        this.fkdid = this.typeList[0].id
                    }
                })
            }else if(name == '3'){
                console.log(title,name);
            }
        },
        onCancel(){
            this.showList = false
        },
        toDetail(item){
            this.obj = item
            this.showList = true
        },
        onConfirm(val){
            console.log(val)
            this.$router.push({path: val.link,query:{fid:this.obj.fid}});
            this.showList = false
        },
        search(){
            this.list = [];
            this.isLoading = false;
            getdatabysearch({
                fsearch: this.fsearch,
                userid: '472a1e84dfcf4dce945bdcd3fe37304a',
                pagenum: this.pagenum
            }).then(res=>{
                console.log(res)
                this.totalCount = res.pageResult.totalCount
                res.pageResult.results.forEach(element => {
                    this.list.push(element);
                });
                this.pagenum = res.pageResult.pageNo
                this.loading = false;
                if (this.list.length >= res.pageResult.totalCount) {
                    this.finished = true;
                }
            })
        },
        toDetail4Class(fid){
             this.$router.push({path: '/govClassDetail',query:{fid:fid}});
        }
    }
}
=======
  <div class="gobstatute">
    <public-header></public-header>
    <div>
      <van-tabs
        color="#07c160"
        type="card"
        v-model="activeName"
        @click="onClick"
        sticky
        animated
        swipeable
      >
        <van-tab name="1" title="搜索">
          <van-search
            style="margin-top:8px"
            @search="search"
            v-model="fsearch"
            background="#07c160"
            placeholder="请输入搜索关键词"
          />
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell
              is-link
              @click="toDetail(item)"
              v-for="item in list"
              :key="item.fid"
              :title="item.fid"
            >
              <template slot="title">
                <div v-html="item.fhtmlcontent" class="celltitle"></div>
              </template>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab name="2" title="类别">
          <van-list
            style="margin-bottom:40px"
            v-model="loadingType"
            :finished="finishedType"
            finished-text="没有更多了"
            @load="onLoadType"
          >
            <van-cell
              is-link
              @click="toDetail4Class(item.fid)"
              v-for="item in list1"
              :key="item.fid"
              :title="item.fid"
            >
              <template slot="title">
                <div v-html="item.fhtmlcontent" class="celltitle"></div>
              </template>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab name="3" title="收藏">
          <van-list v-model="loadingC" :finished="finishedC" finished-text="没有更多了" @load="onLoadC">
            <van-cell
              is-link
              @click="toDetail4Class(item.fid)"
              v-for="item in listC"
              :key="item.fid"
              :title="item.fid"
            >
              <template slot="title">
                <div v-html="item.fhtmlcontent" class="celltitle"></div>
              </template>
            </van-cell>
          </van-list>
        </van-tab>
      </van-tabs>
      <van-popup v-model="showList" get-container="body" position="bottom">
        <van-picker
          show-toolbar
          value-key="text"
          :columns="columns"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-popup
        v-model="showTypeTree"
        get-container="body"
        :style="{ height: '100%' }"
        position="left"
      >
        <el-tree :expand-on-click-node="false" :data="typeList" @node-click="handleNodeClick"></el-tree>
      </van-popup>
      <div v-if="activeId4tab =='2'" @click="ShowTree" class="statuteFooter">选择类别</div>
    </div>
  </div>
</template>

<script>
import publicHeader from "@/components/publicHeader";
import {
  getdatabysearch,
  getdatabyadmin,
  getdatabyKdcatalog,
  getcolletion
} from "@/api/gov/statute";
import {
  Button,
  Tab,
  Tabs,
  Search,
  List,
  Cell,
  CellGroup,
  Popup,
  Picker,
  TreeSelect,
  Toast
} from "vant";
export default {
  name: "gobstatute",
  components: {
    publicHeader,
    [Toast.name]: Toast,
    [TreeSelect.name]: TreeSelect,
    [Button.name]: Button,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [List.name]: List,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      activeId4tab: "",
      totalCountc: 0,
      pagenumc: 1,
      isLoadingC: false,
      loadingC: false,
      finishedC: false,
      listC: [],
      totalCountType: 0,
      finishedType: false,
      loadingType: false,
      activeId: 1,
      activeIndex: 0,
      typeList: [],
      showList: false,
      list: [],
      list1: [],
      loading: false,
      finished: false,
      refreshing: false,
      activeName: "1",
      fsearch: "",
      newsList: [],
      newsId: "",
      more: false,
      pagenum: 1,
      showLink: false,
      columns: [
        { text: "显示方法", link: "/govStatutehtmlremark" },
        { text: "显示内容", link: "/govStatutehtmlConent" }
      ],
      totalCount: 0,
      obj: {},
      showTypeTree: false,
      pagenumtype: 1
    };
  },
  created() {},
  methods: {
    handleNodeClick(val) {
      this.fkdid = val.id;
      this.pagenumtype = 1;
      this.typeList = [];
      this.getTypeList();
      this.showTypeTree = false;
    },
    getTypeList() {
      getdatabyKdcatalog({
        fkdid: this.fkdid,
        userid: "472a1e84dfcf4dce945bdcd3fe37304a",
        pagenum: this.pagenumtype
      }).then(res => {
        this.totalCountType = res.pageResult.totalCount;
        this.list1 = res.pageResult.results;
      });
    },
    init() {
      this.pagenum = 1;
    },
    ShowTree() {
      getdatabyadmin().then(res => {
        if (res.isSuccess) {
          this.typeList = res.list;
          if (this.typeList.length != 0) {
            this.showTypeTree = true;
          } else {
            Toast.fail("暂无类别");
          }
        }
      });
    },
    onLoadC() {
      if (this.isLoadingC) {
        this.list = [];
        this.isLoadingC = false;
      }
      getcolletion({
        fsearch: "",
        userid: "472a1e84dfcf4dce945bdcd3fe37304a",
        pagenum: this.pagenumc
      }).then(res => {
        if (res.isSuccess) {
          this.totalCountc = res.pageResult.totalCount;
          res.pageResult.results.forEach(element => {
            this.listC.push(element);
          });
          this.pagenumc = res.pageResult.pageNo;
          this.loadingC = false;
          if (this.listC.length >= res.pageResult.totalCount) {
            this.finishedC = true;
          }
        } else {
          Toast.fail(res.errMessage);
        }
      });
    },
    onLoad() {
      if (this.isLoading) {
        this.list = [];
        this.isLoading = false;
      }
      getdatabysearch({
        fsearch: this.fsearch,
        userid: "472a1e84dfcf4dce945bdcd3fe37304a",
        pagenum: this.pagenum
      }).then(res => {
        console.log(res);
        if (res.isSuccess) {
          this.totalCount = res.pageResult.totalCount;
          res.pageResult.results.forEach(element => {
            this.list.push(element);
          });

          this.pagenum = res.pageResult.pageNo;
          this.loading = false;
          if (this.list.length >= res.pageResult.totalCount) {
            this.finished = true;
          }
        } else {
          Toast.fail(res.errMessage);
        }
      });
    },
    onLoadType() {
      if (this.isLoadingType) {
        this.list1 = [];
        this.isLoadingType = false;
      }
      getdatabyKdcatalog({
        fkdid: this.fkdid,
        userid: "472a1e84dfcf4dce945bdcd3fe37304a",
        pagenum: this.pagenumtype
      }).then(res => {
        console.log(res);
        this.totalCountType = res.pageResult.totalCount;
        res.pageResult.results.forEach(element => {
          this.list1.push(element);
        });

        this.pagenumtype = res.pageResult.pageNo;
        this.loadingType = false;
        if (this.list1.length >= res.pageResult.totalCount) {
          this.finishedType = true;
        }
      });
    },
    onClick(name, title) {
      this.activeId4tab = name;
      if (name == "1") {
        this.list = [];
        this.onLoad();
      } else if (name == "2") {
        getdatabyadmin().then(res => {
          if (res.list.length != 0) {
            this.typeList = res.list;
            this.fkdid = this.typeList[0].id;
          }
        });
      } else if (name == "3") {
        console.log(title, name);
      }
    },
    onCancel() {
      this.showList = false;
    },
    toDetail(item) {
      this.obj = item;
      this.showList = true;
    },
    onConfirm(val) {
      console.log(val);
      this.$router.push({ path: val.link, query: { fid: this.obj.fid } });
      this.showList = false;
    },
    search() {
      this.list = [];
      this.isLoading = false;
      getdatabysearch({
        fsearch: this.fsearch,
        userid: "472a1e84dfcf4dce945bdcd3fe37304a",
        pagenum: this.pagenum
      }).then(res => {
        console.log(res);
        this.totalCount = res.pageResult.totalCount;
        res.pageResult.results.forEach(element => {
          this.list.push(element);
        });
        this.pagenum = res.pageResult.pageNo;
        this.loading = false;
        if (this.list.length >= res.pageResult.totalCount) {
          this.finished = true;
        }
      });
    },
    toDetail4Class(fid) {
      this.$router.push({ path: "/govClassDetail", query: { fid: fid } });
    }
  }
};
>>>>>>> zcm
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.celltitle {
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  width: 300px;
  text-align: left;
<<<<<<< HEAD
    text-overflow: ellipsis;
    white-space: nowrap;
}
 .celltitle p {
     margin:0;
     font-size:14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 24px;
  }
  .celltitle span{
       font-size:14px!important
  }
  .celltitle p span{
       font-size:14px!important
  }
  .van-tree-select{
      height: 100%!important;
  }
  .statuteFooter{
      width: 100%;
      position: fixed;
      bottom:0;
      left:0;
      height:40px;
      background:#07c160 ;
      color: white;
      line-height: 40px;
  }
=======
  text-overflow: ellipsis;
  white-space: nowrap;
}
.celltitle p {
  margin: 0;
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 24px;
}
.celltitle span {
  font-size: 14px !important;
}
.celltitle p span {
  font-size: 14px !important;
}
.van-tree-select {
  height: 100% !important;
}
.statuteFooter {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 40px;
  background: #07c160;
  color: white;
  line-height: 40px;
}
>>>>>>> zcm
</style>
